<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="top-view flex row">
			<view :class="[ tabType==0 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(0)">
				<text :class="[ tabType==0 ? 'top-item-title-active':'top-item-title']">全部</text>
				<view :class="[ tabType==0 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==1 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(1)">
				<text :class="[ tabType==1 ? 'top-item-title-active':'top-item-title']">本日</text>
				<view :class="[ tabType==1 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==2 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(2)">
				<text :class="[ tabType==2 ? 'top-item-title-active':'top-item-title']">本月</text>
				<view :class="[ tabType==2 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" top="200rpx" bottom="120rpx">
			<view class="item-view flex" v-for="(item,index) in dataList" :key="index">
				<view class="item-top flex row aCenter">
					<text class="item-time">创建时间：{{item.createtime}}</text>
					<!-- 状态:1=等待审核,2=未核销,3=已核销,4=已过期,5=预定失败,6=已完成 -->
					<text class="item-time">{{
						item.status == 1 ? '等待审核':
						item.status == 2 ? '未核销':
						item.status == 3 ? '已核销':
						item.status == 4 ? '已过期':
						item.status == 5 ? '预定失败':
						item.status == 6 ? '已完成':'未知状态'
					}}</text>
				</view>
				<view class="item-info flex row aCenter">
					<text class="item-name">
						{{item.user_name}}
						<text class="item-desc">{{item.user_mobile}}</text>	
					</text>
					<text class="item-desc">到店人数：{{item.num}}</text>
				</view>
				<view class="item-time-view flex row aCenter">
					<text class="item-hint">预约到店日期：{{item.expiretime}}</text>
				</view>
				<view class="item-time-view flex row aCenter">
					<text class="item-hint">验证时间：{{item.checktime ? item.checktime : '暂未验证'}}</text>
				</view>
			</view>
		</mescroll-uni>
		
		<!-- 底部桌位预定按钮 -->
		<view class="btn-btm flex row center" @click="reserve">
			<image src="../../static/add_r.png"></image>
			<text>桌位预定</text>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabType: 0, //0 1 2
				
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {},// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				// 列表数据
				dataList: [],
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.mescroll && this.mescroll.resetUpScroll();
		},
		methods: {
			reserve () {
				//前往预定页面
				uni.navigateTo({
					url: '../role-user/reserve?type=2'
				})
			},
			updataTabType (type) {
				this.tabType = type;
				this.mescroll.resetUpScroll();
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(){
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			upCallback(page) {
				let params = {
					token: uni.getStorageSync("token"),
					p: page.num,
					type: this.tabType,
				}
				console.log(params);
				this.$request("api/index/subscribe_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							if(page.num == 1){
								this.dataList = data;
							}else{
								this.dataList = this.dataList.concat(data);
							}
							this.mescroll.endSuccess(data.length);
						}else{
							this.mescroll.endErr()
						}
					}).catch((e) => {
						this.dataList = [];
						this.mescroll.endErr()
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	$bg-color: #010B24;
	$top-view-height: 100rpx;
	.box{
		background-color: $bg-color;
	}
	.top-view {
		width: 100%;
		height: $top-view-height;
		padding: 0 30rpx;
	}
	.top-item, .top-item-active {
		flex: 1;
		height: $top-view-height;
	}
	.top-item-title, .top-item-title-active {
		font-size: 30rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.top-item-title {
		color: #FFFFFFCC;
	}
	.top-item-title-active {
		color: #FFF;
	}
	.top-item-line, .top-item-line-active {
		width: 75rpx;
		height: 5rpx;
		border-radius: 3rpx;
	}
	.top-item-line {
		background-color: #010B24;
	}
	.top-item-line-active {
		background-color: #FFF;
	}
	
	.item-view {
		width: 700rpx;
		margin-left: 25rpx;
		margin-bottom: 20rpx;
		background-color: #FFF;
		border-radius: 18rpx;
		padding: 0 30rpx 26rpx;
	}
	.btn-btm {
		width: 100%;
		height: 119rpx;
		background-color: #9637E6;
		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 20rpx;
		}
		text {
			font-size: 28rpx;
			color: #FFF;
		}
		&:active {
			background-color: #9637E6EE;
		}
	}
	
	.item-time {
		font-size: 26rpx;
		color: #363636;
	}
	.item-name {
		font-size: 30rpx;
		color: #222222;
		font-weight: bold;
	}
	.item-desc {
		font-size: 28rpx;
		color: #222222;
		font-weight: 400;
		margin-left: 20rpx;
	}
	.item-hint {
		font-size: 26rpx;
		color: #848484;
	}
	.item-top {
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #efefef;
		justify-content: space-between;
	}
	.item-info {
		width: 100%;
		height: 70rpx;
		justify-content: space-between;
		margin-top: 10rpx;
	}
	.item-time-view {
		width: 100%;
		height: 46rpx;
	}
</style>
